<template>
	<view class="mons">
		<view class="times">
			<image src="../../static/img/3/3-65.png" mode="widthFix"></image>
			<picker mode="date" :value="date" :start="startDate" fields='month' :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
			<view class="r">
				获得：{{pointin}} 使用：{{pointout}}
			</view>
		</view>
		<view class="list">

			<view class="li" v-for="(l,index) in list" :key="index">
				<view class="lil">
					<view>
						{{l.memo}}
					</view>
					<view>
						{{l.calculate_date}}
					</view>
				</view>
				<view class="rig" :style="{color:(l.chang_points>0?'red':'green')}">
					<text v-if="l.chang_points>0">+</text>{{l.chang_points}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			const currentDate = this.getDate({
			            format: true
			 })
			return {
				date: currentDate,
				pageIndex:1,
				list:[],
				pointin:0,
				pointout:0,
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			bindDateChange: function(e) {
				this.list = []
				this.pointin = 0
				this.pointout = 0
				this.pageIndex = 1
				this.date = e.target.value
				this.nextDate =(this.date.split("-"))[0]+'-'+ (((this.date.split("-"))[1])*1+1)
				this.getList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				// let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			getList(){
				let score = {
					"conditions": [
						
						{
							"name": "mid",
							"value1": this.$SysCache.get('userInfo').id || this.$SysCache.get('userInfo').mid,
							"type": "string",
							"op": "eq"
						},
						{"name":"calculate_date","entity":"PointsDetail","value1":this.date,"value2":this.nextDate,"type":"datetime","op":"between"}
						
					],
					"pager": {
						"pageIndex": this.pageIndex,
						"pageSize": 20,
						"totalPage": null,
						"totalCount": null
					},
					"orders": [{
						"name": "calculate_date",
						"entity": "PointsDetail",
						"order": "desc"
					}],
					"fields": [{
							"name": "mid"
						},{
							"name": "chang_points"
						},{
							"name": "source_type"
						},{
							"name": "memo"
						},{
							"name": "points_money"
						},{"name":"calculate_date","entity":"PointsDetail","format":"Y-m-d H:i:s"}
						
					]
				}
				this.$Request.post4(
					this.$api.httpApi.user.pointsquery, score
				).then(res => {
					console.log(res)
					let arry = [...this.list,...res.data]
					
					console.log(arry)
					
					let ad = [...new Set(arry.map(item => JSON.stringify(item)))]
					console.log(ad)
					if(ad.length!=arry.length){
						uni.showToast({
							title:"没有更多了！",
							icon:"none"
						})
					}else{
						this.list = this.list.concat(res.data)
						this.pageIndex++
						
					}
					this.list.forEach(item=>{
						if(item.chang_points>0){
							this.pointin+=item.chang_points
						}else{
							this.pointout+=item.chang_points
						}
					})
					
				
				});
			}
		},
		onReachBottom() {
			this.getList()
		},
		onNavigationBarButtonTap(){
				   uni.navigateTo({
				       url: '/pages/user/myjfjs'
				   })
		}

	}
</script>

<style scoped>
	.times{
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: 83rpx;
		line-height: 83rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(102,102,102,1);
	}
	.times image{
		display: inline-block;
		width: 24rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
		.times .r{
			float: right;
		}
	.times picker{
		display: inline-block;
		vertical-align: middle;
	}
	.list .li {
		margin-bottom: 1px;
		background: #fff;
		padding: 30rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.lil {
		width: 60%;
		display: inline-block;
		vertical-align: middle;
	}

	.list .li .rig {
		display: inline-block;
		/* float: right; */
		width: 40%;
		text-align: right;
		color: #1DC18D;
	}
.list .li .red{
	color: #F0406F;
}
	uni-page-body {
		height: 100%;
	}

	.mons {
		min-height: 100%;
		background: #EEEEEE;
	}
</style>
